<template>
  <div>
    <el-card :bordered="false" dis-hover class="ivu-mt">
      <div>
        <el-tabs v-model="formValidate.factor" @on-click="onClickTab">
          <el-tab-pane
            v-for="(item, index) in tabs"
            :label="item.name"
            :name="item.type"
            :key="index"
          />
        </el-tabs>
      </div>
      <el-row type="flex" class="mt10 acea-row row-middle row-center">
        <div span="23">
          <el-form
            size="small"
            ref="formValidate"
            :rules="ruleValidate"
            :model="formValidate"
            inline
            label-width="120px"
          >
            <el-row type="flex" style="display: block">
              <div span="24">
                <el-form-item label="活动名称：" prop="name" label-for="name">
                  <el-input
                    class="perW30"
                    placeholder="请输入活动名称"
                    element-id="name"
                    v-model="formValidate.name"
                  />
                </el-form-item>
              </div>
              <div span="24" style="display: block">
                <el-form-item label="活动时间：">
                  <div class="acea-row row-middle">
                    <el-date-picker
                      :editable="false"
                      type="datetimerange"
                      format="yyyy-MM-dd HH:mm"
                      placeholder="请选择活动时间"
                      @change="onchangeTime"
                      class="perW30"
                      v-model="formValidate.period"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </div>
              <div span="24">
                <el-form-item
                  label="参与用户："
                  prop="attends_user"
                  label-for="attends_user"
                >
                  <el-radio-group
                    element-id="attends_user"
                    v-model="formValidate.attends_user"
                    @on-change="changeUsers"
                  >
                    <el-radio :label="1" class="radio">全部用户</el-radio>
                    <!--  <el-radio :label="2">部分用户</el-radio> -->
                  </el-radio-group>
                </el-form-item>
              </div>

              <div span="24" v-if="formValidate.attends_user == 2">
                <el-form-item
                  label="用户类型："
                  :prop="formValidate.attends_user == 2 ? 'is_svip' : ''"
                >
                  <div class="acea-row row-middle">
                    <Select
                      v-model="formValidate.is_svip"
                      class="perW30"
                      clearable
                      placeholder="请选择是否是付费会员"
                    >
                      <Option
                        v-for="item in templateList"
                        :value="item.id"
                        :key="item.id"
                        >{{ item.name }}</Option
                      >
                    </Select>
                  </div>
                </el-form-item>
              </div>
              <div span="24" v-if="formValidate.attends_user == 2">
                <el-form-item
                  label="用户标签："
                  :prop="formValidate.attends_user == 2 ? 'user_label' : ''"
                >
                  <div class="acea-row row-middle">
                    <Select
                      v-model="formValidate.user_label"
                      class="perW30"
                      clearable
                      placeholder="请选择用户标签"
                    >
                      <Option
                        v-for="item in userLabelList"
                        :value="String(item.id)"
                        :key="item.id"
                        >{{ item.label_name }}</Option
                      >
                    </Select>
                  </div>
                  <div class="ml100 grey">
                    二个条件都设置后,必须这些条件都满足的用户才能参加抽奖
                  </div>
                </el-form-item>
              </div>
              <div span="24" v-if="formValidate.factor == 5">
                <el-form-item
                  label="抽奖次数："
                  :prop="formValidate.factor == 5 ? 'lottery_num_term' : ''"
                  label-for="status"
                >
                  <el-radio-group
                    element-id="lottery_num_term"
                    v-model="formValidate.lottery_num_term"
                  >
                    <el-radio :label="1" class="radio">每天N次</el-radio>
                    <el-radio :label="2">每人N次</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div span="24" v-if="formValidate.factor == 5">
                <el-form-item
                  label="邀请新用户最多可获得抽奖"
                  :prop="formValidate.factor == 5 ? 'lottery_num' : ''"
                  label-for="lottery_num"
                >
                  <div class="acea-row row-middle">
                    <div class="mr10 grey"></div>
                    <InputNumber
                      placeholder=""
                      element-id="lottery_num"
                      :min="1"
                      :precision="0"
                      v-model="formValidate.lottery_num"
                      class="perW20"
                    />
                    <div class="ml10 grey">次</div>
                  </div>
                </el-form-item>
              </div>
              <div span="24" v-if="formValidate.factor == 5">
                <el-form-item
                  label="邀请一位新用户关注公众号可获得抽奖"
                  :prop="formValidate.factor == 5 ? 'spread_num' : ''"
                  label-for="spread_num"
                >
                  <div class="acea-row row-middle">
                    <div class="mr10 grey"></div>
                    <InputNumber
                      placeholder=""
                      element-id="spread_num"
                      :min="1"
                      :precision="0"
                      v-model="formValidate.spread_num"
                      class="perW20"
                    />
                    <div class="ml10 grey">次</div>
                  </div>
                </el-form-item>
              </div>
              <div
                span="24"
                v-if="
                  formValidate.factor == 1 ||
                  formValidate.factor == 3 ||
                  formValidate.factor == 4
                "
              >
                <el-form-item
                  :label="
                    formValidate.factor == 1 ? '抽奖消耗幸运分：' : '抽奖次数：'
                  "
                  :prop="
                    formValidate.factor == 1 ||
                    formValidate.factor == 3 ||
                    formValidate.factor == 4
                      ? 'factor_num'
                      : ''
                  "
                  label-for="factor_num"
                >
                  <div class="acea-row row-middle">
                    <div class="mr10 grey"></div>
                    <el-input-number
                      placeholder=""
                      element-id="factor_num"
                      :min="1"
                      :precision="0"
                      v-model="formValidate.factor_num"
                      class="perW20"
                    />
                    <div class="ml10 grey" v-if="formValidate.factor !== 1">
                      次
                    </div>
                  </div>
                </el-form-item>
              </div>
            </el-row>
            <el-row>
              <div span="24">
                <el-form-item label="奖品信息：" prop="prize">
                  <el-table
                    :data="specsData"
                    style="width: 100%"
                    size="mini"
                    class="table"
                    highlight-current-row
                  >
                    <el-table-column
                      label="编号"
                      width="50"
                      prop="id"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.id }}</div>
                      </template>
                    </el-table-column>

                    <el-table-column label="图片" width="100" align="center">
                      <template slot-scope="scope">
                        <div
                          class="acea-row row-middle row-center-wrapper"
                          @click="modalPicTap('dan', 'goods', scope.$index)"
                        >
                          <div
                            class="pictrue pictrueTab"
                            v-if="scope.row.image"
                          >
                            <img v-lazy="scope.row.image" style="width: 50px" />
                          </div>
                          <div
                            class="upLoad pictrueTab acea-row row-center-wrapper"
                            v-else
                          >
                            <el-icon
                              type="ios-camera-outline"
                              size="21"
                              class="iconfonts"
                            />
                          </div>
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column label="名称" align="center">
                      <template slot-scope="scope">
                        <div>{{ scope.row.name }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column label="奖品" align="center">
                      <template slot-scope="scope">
                        <span v-if="scope.row.type == 1">未中奖</span>
                        <span v-if="scope.row.type == 5">平台优惠券</span>
                        <span v-if="scope.row.type == 10">商家优惠券</span>
                        <!-- <span v-if="scope.row.type == 6">商品</span>
                        <span v-if="scope.row.type == 4">红包</span> -->
                        <span v-if="scope.row.type == 3">余额</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="提示语" align="center">
                      <template slot-scope="scope">
                        <div>{{ scope.row.prompt }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column label="数量" width="120" align="center">
                      <template slot-scope="scope">
                        <el-input-number
                          v-model="scope.row.total"
                          :max="100"
                          :min="0"
                          :precision="0"
                          class="priceBox"
                          @change="
                            (data) => {
                              changeChance(data, scope.$index);
                            }
                          "
                        ></el-input-number>
                      </template>
                    </el-table-column>
                    <el-table-column label="权重" width="120" align="center">
                      <template slot-scope="scope">
                        <el-input-number
                          v-model="scope.row.chance"
                          :max="100"
                          :min="0"
                          :precision="0"
                          class="priceBox"
                          @change="
                            (data) => {
                              changeChance(data, scope.$index);
                            }
                          "
                        ></el-input-number>
                      </template>
                    </el-table-column>
                    <el-table-column label="比率" width="120" align="center">
                      <template slot-scope="scope">
                        {{ scope.row.probability }}
                      </template>
                    </el-table-column>
                    <el-table-column label="序号" width="120" align="center">
                      <template slot-scope="scope">
                        <el-input-number
                          v-model="scope.row.sort"
                          :max="8"
                          :min="1"
                          :precision="0"
                          class="priceBox"
                          @change="
                            (data) => {
                              changeChance(data, scope.$index);
                            }
                          "
                        ></el-input-number>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" align="center">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          slot="reference"
                          @click="handleEdit(scope.$index, scope.row)"
                          >编辑</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <Button
                    v-if="specsData.length < 8"
                    type="primary"
                    class="submission mr15 mt20"
                    @click="addGoods"
                    >添加奖品</Button
                  >
                </el-form-item>
              </div>
            </el-row>
            <div>
              <el-col
                class="mr50"
                v-if="formValidate.factor != 3 && formValidate.factor != 4"
              >
                <el-form-item label="活动背景图：" prop="image_input">
                  <div class="upLoadPicBox" @click="modalPicTap_image('1')">
                    <div v-if="formValidate.image" class="pictrue">
                      <img :src="formValidate.image" />
                    </div>
                    <div v-else class="upLoad">
                      <i class="el-icon-camera cameraIconfont" />
                    </div>
                  </div>
                </el-form-item>
              </el-col>

              <el-form-item
                label=""
                :prop="
                  formValidate.factor != 3 &&
                  formValidate.factor != 4 &&
                  formValidate.is_content == 1
                    ? 'content'
                    : ''
                "
                v-show="
                  formValidate.factor != 3 &&
                  formValidate.factor != 4 &&
                  formValidate.is_content == 1
                "
                style="display: block"
              >
                <WangEditor
                  style="width: 90%"
                  :content="formValidate.content"
                  @editorContent="getEditorContent"
                ></WangEditor>
              </el-form-item>
              <el-form-item
                label="活动状态："
                prop="status"
                label-for="status"
                style="display: block"
              >
                <el-radio-group
                  element-id="status"
                  v-model="formValidate.status"
                >
                  <el-radio :label="0">关闭</el-radio>
                  <el-radio :label="1" class="radio">开启</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button
                type="primary"
                class="submission"
                :loading="submitOpen"
                @click="next('formValidate')"
              >
                <div v-if="!submitOpen">提交</div>
                <div v-else>提交中</div>
              </el-button>
            </el-form-item>
            <Spin size="large" fix v-if="spinShow"></Spin>
          </el-form>
        </div>
      </el-row>
    </el-card>

    <!-- 上传图片-->
    <el-dialog
      :visible.sync="modalPic"
      width="950px"
      trigger="manual"
      title="上传商品图"
    >
      <uploadPictures
        :isChoice="isChoice"
        @getPic="getPic"
        v-if="modalPic"
      ></uploadPictures>
    </el-dialog>

    <el-dialog
      title="奖品编辑"
      :visible.sync="addGoodsModel"
      :close-on-click-modal="false"
    >
      <addGoods
        v-if="addGoodsModel"
        @addGoodsData="addGoodsData"
        :editData="editData"
      ></addGoods>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import goodsList from "@/components/goodsList/index";
import uploadPictures from "@/components/uploadPicture";
import addGoods from "./addGoods";
import {
  lotteryNewDetailApi,
  lotteryDetailApi,
  lotteryCreateApi,
  lotteryEditApi,
} from "@/api/lottery"; //详情 创建 编辑
import { lotteryFrom } from "../formRule/lotteryFrom";
import { labelListApi } from "@/api/product";
import { labelLstApi } from "@/api/user";
import WangEditor from "@/components/wangEditor/index.vue";

import { formatDate } from "@/utils/validate";

export default {
  name: "lotteryCreate",
  components: {
    uploadPictures,
    addGoods,
    WangEditor,
  },
  data() {
    return {
      selectDataLabel: [],
      selectLabelShow: false,
      content: "",
      tabs: [
        {
          name: "幸运分抽取",
          type: "1",
        },
        // {
        //   name: "订单支付",
        //   type: "3",
        // },
        // {
        //   name: "订单评价",
        //   type: "4",
        // },
      ],
      title: "添加奖品",
      loading: false,
      userLabelList: [], //用户标签列表
      userLevelListApi: [], //用户等级列表
      submitOpen: false,
      spinShow: false,
      addGoodsModel: false,
      editData: {},
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: "100%", // 初始容器宽度
        UEDITOR_HOME_URL: "/UEditor/",
        serverUrl: "",
      },
      isChoice: "单选",
      current: 0,
      modalPic: false,
      modal_loading: false,
      images: [],
      templateList: [
        { id: 0, name: "非付费会员" },
        { id: 1, name: "付费会员" },
      ],
      specsData: [
        {
          type: 1,
          name: "未中奖",
          num: 10,
          image:
            "https://shop.miboon.com/uploads/def/20221215/4985717aaad960f88064d50021f4efa5.png",
          chance: 100,
          product_id: 0,
          coupon_id: 0,
          total: 10,
          prompt: "您未中奖",
          goods_image: "",
          coupon_title: "",
          id: 1,
          sort: 1,
          probability: "25.00%",
        },
        {
          type: 5,
          name: "新人10无券",
          num: 0,
          image:
            "https://shop.miboon.com/uploads/def/20221215/5d2d1f42047c654f1d44435a2a26fa8f.png",
          chance: 100,
          product_id: 0,
          total: 20,
          prompt: "新人10无券",
          goods_image: "",
          id: 2,
          sort: 2,
          probability: "25.00%",
        },
        {
          type: 2,
          name: "10个积分",
          num: 10,
          image:
            "https://shop.miboon.com/uploads/def/20221215/87256dbde14a2fe8761bd249129a3d5f.png",
          chance: 30,
          product_id: 0,
          coupon_id: 0,
          total: 20,
          prompt: "10个积分",
          goods_image: "",
          coupon_title: "",
          id: 3,
          sort: 3,
          probability: "7.50%",
        },
        {
          type: 6,
          name: "普通商品",
          num: 0,
          image:
            "https://shop.miboon.com/uploads/def/20221215/0c69ad1c3bfdc45884789e570cad5986.png",
          chance: 100,
          coupon_id: 0,
          total: 30,
          prompt: "普通商品",
          goods_image:
            "https://shop.miboon.com/uploads/def/20221117/495eab85a86dc50cc3bceb26cb27c9d0.jpg",
          coupon_title: "",
          id: 4,
          sort: 4,
          probability: "25.00%",
        },
        {
          type: 4,
          name: "100元红包",
          num: 100,
          image:
            "https://shop.miboon.com/uploads/def/20221215/5944836e5690a9c93c71aa68e7629501.png",
          chance: 10,
          product_id: 0,
          coupon_id: 0,
          total: 10,
          prompt: "100元红包",
          goods_image: "",
          coupon_title: "",
          id: 5,
          sort: 5,
          probability: "2.50%",
        },
        {
          type: 3,
          name: "50元余额",
          num: 50,
          image:
            "https://shop.miboon.com/uploads/def/20221215/0c69ad1c3bfdc45884789e570cad5986.png",
          chance: 30,
          product_id: 0,
          coupon_id: 0,
          total: 20,
          prompt: "50元余额",
          goods_image: "",
          coupon_title: "",
          id: 6,
          sort: 6,
          probability: "7.50%",
        },
        {
          type: 1,
          name: "未中奖",
          num: 0,
          image:
            "https://shop.miboon.com/uploads/def/20221214/d2ee4042063b7d2abd4ab7013520dbe1.png",
          chance: 10,
          product_id: 0,
          coupon_id: 0,
          total: 20,
          prompt: "未中奖",
          goods_image: "",
          coupon_title: "",
          id: 7,
          sort: 7,
          probability: "2.50%",
        },
        {
          type: 6,
          name: "拼商品",
          num: 0,
          image:
            "https://shop.miboon.com/uploads/def/20221118/d49d690da09b50dc0c5b98a1de08758c.png",
          chance: 20,
          coupon_id: 0,
          total: 10,
          prompt: "拼商品",
          goods_image:
            "https://crmeb-test.shop.miboon.com/uploads/def/20230316/0985e91f8b7b93ef83110b9776d509a1.jpg",
          coupon_title: "",
          id: 8,
          sort: 8,
          probability: "5.00%",
        },
      ],
      formValidate: {
        images: [],
        name: "九宫格抽奖", //活动名称
        desc: "顺粉和", //活动描述
        image:
          "https://crmeb-test.shop.miboon.com/uploads/def/20230316/57f097d06c6b92c8e41a4b0acdf28caa.jpg", //活动背景图
        factor: "6", //抽奖类型：1:积分 2:余额 3：下单支付成功 4:订单评价',5:关注
        factor_num: 1, //获取一次抽奖的条件数量
        attends_user: 1, //参与用户1：所有  2：部分
        user_level: [], //参与用户等级
        user_label: [], //参与用户标签
        is_svip: "-1", //参与用户是否付费会员
        prize_num: 0, //奖品数量
        period: [new Date("2023-05-01"), new Date("2023-06-30")], //活动时间
        prize: [], //奖品数组
        lottery_num_term: 1, //抽奖次数限制：1：每天2：每人
        lottery_num: 1, //抽奖次数
        spread_num: 1, //关注推广获取抽奖次数
        is_all_record: 0, //中奖纪录展示
        is_personal_record: 0, //个人中奖纪录展示
        is_content: 0, //活动规格是否展示
        content: "", //富文本内容
        status: 1, //状态
      },
      ruleValidate: lotteryFrom,
      currentid: "",
      picTit: "",
      tableIndex: 0,
      copy: 0,
      editIndex: null,
      id: "",
      copy: 0,
    };
  },
  filters: {
    typeName(type) {
      if (type == 1) {
        return "未中奖";
      } else if (type == 2) {
        return "积分";
      } else if (type == 3) {
        return "余额";
      } else if (type == 4) {
        return "红包";
      } else if (type == 5) {
        return "平台优惠券";
      } else if (type == 6) {
        return "商品";
      } else if (type == 10) {
        return "商家优惠券";
      }
    },
  },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 135;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
  },
  mounted() {
    this.formValidate.id = this.$route.query.id;
    if (this.formValidate.id) {
      this.getylotteryDetail(this.formValidate.id);
    } else {
      this.getInfo();
    }
    this.labelListApi();
    // this.levelListApi();
  },
  methods: {
    changeUsers(e) {
      if (e == 1) {
        this.formValidate.user_level = []; //参与用户等级
        this.formValidate.user_label = []; //参与用户标签
        this.formValidate.is_svip = "-1"; //参与用户是否付费会员
        this.selectDataLabel = []; //参与用户是否付费会员
      }
    },
    // 标签弹窗关闭
    labelClose() {
      this.selectLabelShow = false;
    },
    activeSelectData(data) {
      this.selectLabelShow = false;
      this.selectDataLabel = data;
    },
    onClickTab(e) {
      this.formValidate.factor = e;
      this.getInfo(e);
    },
    getEditorContent(data) {
      this.content = data;
    },
    //用户标签列表
    labelListApi() {
      labelLstApi({
        page: 1,
        limit: 9999,
      })
        .then((res) => {
          this.userLabelList = res.data.list;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    //用户等级列表
    levelListApi() {
      levelListApi().then((res) => {
        this.userLevelListApi = res.data.list;
      });
    },
    // 具体日期
    onchangeTime(e) {
      this.$nextTick(() => {
        this.$set(this.formValidate, "period", e);
      });
    },

    getylotteryDetail(id) {
      lotteryDetailApi(id)
        .then((res) => {
          console.log("lotteryDetailApi", res.data);
          this.specsData = res.data.prize;
          this.getProbability();
        })
        .catch((err) => {});
    },
    // 详情
    getInfo(e) {
      this.spinShow = true;
      // alert('yes');
      console.log("this.formValidate.factor", this.formValidate.factor);
      lotteryNewDetailApi(this.formValidate.factor)
        .then((res) => {
          console.log("res.status", res.data);
          if (res.status == 200 && !Array.isArray(res.data)) {
            console.log("info");
            this.formValidate = res.data;
            this.formValidate.user_level = res.data.user_level || [];
            this.selectDataLabel = res.data.user_label || [];
            this.formValidate.is_svip = res.data.is_svip;
            this.content = res.data.is_content ? res.data.content : "";
            this.formValidate.factor = res.data.factor.toString();
            console.log("infofff");
            // this.formValidate.period = [
            //   this.formatDate(res.data.start_time) || '',
            //   this.formatDate(res.data.end_time) || '',
            // ];

            console.log("res.data.prize", res.data.prize);
            this.specsData = res.data.prize;

            this.getProbability();
          } else {
            this.formValidate = {
              images: [],
              name: "", //活动名称
              desc: "", //活动描述
              image: "", //活动背景图
              factor: e.toString(), //抽奖类型：1:积分 2:余额 3：下单支付成功 4:订单评价',5:关注
              factor_num: 1, //获取一次抽奖的条件数量
              attends_user: 1, //参与用户1：所有  2：部分
              user_level: [], //参与用户等级
              user_label: [], //参与用户标签
              is_svip: "-1", //参与用户是否付费会员
              prize_num: 0, //奖品数量
              period: [], //活动时间
              prize: [], //奖品数组
              lottery_num_term: 1, //抽奖次数限制：1：每天2：每人
              lottery_num: 1, //抽奖次数
              spread_num: 1, //关注推广获取抽奖次数
              is_all_record: 0, //中奖纪录展示
              is_personal_record: 0, //个人中奖纪录展示
              is_content: 0, //活动规格是否展示
              content: "", //富文本内容
              status: 0, //状态
            };
            this.specsData = [
              {
                type: 1,
                name: "未中奖",
                num: 10,
                image:
                  "https://shop.miboon.com/uploads/def/20221215/4985717aaad960f88064d50021f4efa5.png",
                chance: 100,
                product_id: 0,
                coupon_id: 0,
                total: 10,
                prompt: "您未中奖",
                goods_image: "",
                coupon_title: "",
                id: 1,
                sort: 1,
                probability: "25.00%",
              },
              {
                type: 5,
                name: "新人10无券",
                num: 0,
                image:
                  "https://shop.miboon.com/uploads/def/20221215/5d2d1f42047c654f1d44435a2a26fa8f.png",
                chance: 100,
                product_id: 0,
                total: 20,
                prompt: "新人10无券",
                goods_image: "",
                id: 2,
                sort: 2,
                probability: "25.00%",
              },
              {
                type: 2,
                name: "10个积分",
                num: 10,
                image:
                  "https://shop.miboon.com/uploads/def/20221215/87256dbde14a2fe8761bd249129a3d5f.png",
                chance: 30,
                product_id: 0,
                coupon_id: 0,
                total: 20,
                prompt: "10个积分",
                goods_image: "",
                coupon_title: "",
                id: 3,
                sort: 3,
                probability: "7.50%",
              },
              {
                type: 6,
                name: "普通商品",
                num: 0,
                image:
                  "https://shop.miboon.com/uploads/def/20221215/0c69ad1c3bfdc45884789e570cad5986.png",
                chance: 100,
                coupon_id: 0,
                total: 30,
                prompt: "普通商品",
                goods_image:
                  "https://shop.miboon.com/uploads/def/20221117/495eab85a86dc50cc3bceb26cb27c9d0.jpg",
                coupon_title: "",
                id: 4,
                sort: 4,
                probability: "25.00%",
              },
              {
                type: 4,
                name: "100元红包",
                num: 100,
                image:
                  "https://shop.miboon.com/uploads/def/20221215/5944836e5690a9c93c71aa68e7629501.png",
                chance: 10,
                product_id: 0,
                coupon_id: 0,
                total: 10,
                prompt: "100元红包",
                goods_image: "",
                coupon_title: "",
                id: 5,
                sort: 5,
                probability: "2.50%",
              },
              {
                type: 3,
                name: "50元余额",
                num: 50,
                image:
                  "https://shop.miboon.com/uploads/def/20221215/0c69ad1c3bfdc45884789e570cad5986.png",
                chance: 30,
                product_id: 0,
                coupon_id: 0,
                total: 20,
                prompt: "50元余额",
                goods_image: "",
                coupon_title: "",
                id: 6,
                sort: 6,
                probability: "7.50%",
              },
              {
                type: 1,
                name: "未中奖",
                num: 0,
                image:
                  "https://shop.miboon.com/uploads/def/20221214/d2ee4042063b7d2abd4ab7013520dbe1.png",
                chance: 10,
                product_id: 0,
                coupon_id: 0,
                total: 20,
                prompt: "未中奖",
                goods_image: "",
                coupon_title: "",
                id: 7,
                sort: 7,
                probability: "2.50%",
              },
              {
                type: 6,
                name: "拼商品",
                num: 0,
                image:
                  "https://shop.miboon.com/uploads/def/20221118/d49d690da09b50dc0c5b98a1de08758c.png",
                chance: 20,
                coupon_id: 0,
                total: 10,
                prompt: "拼商品",
                goods_image:
                  "https://crmeb-test.shop.miboon.com/uploads/def/20230316/0985e91f8b7b93ef83110b9776d509a1.jpg",
                coupon_title: "",
                id: 8,
                sort: 8,
                probability: "5.00%",
              },
            ];
          }
        })
        .catch((err) => {});
      this.spinShow = false;
    },
    // 下一步
    next(name) {
      this.formValidate.prize = this.specsData;
      if (this.formValidate.is_content) {
        // this.formValidate.content = formatRichText(this.content);
      }
      if (this.formValidate.attends_user == 2) {
        if (this.selectDataLabel.length) {
          let activeIds = [];
          this.selectDataLabel.forEach((item) => {
            activeIds.push(item.id);
          });
          this.formValidate.user_label = activeIds;
        }
      }
      if (this.submitOpen) return false;
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.submitOpen = true;
          if (this.formValidate.id && !this.copy) {
            lotteryEditApi(this.formValidate.id, this.formValidate)
              .then(async (res) => {
                this.$message.success(res.message);
                this.submitOpen = false;
                // setTimeout(() => {
                //   this.submitOpen = false;
                //   this.$router.push({
                //     path: "/admin/marketing/lottery/recording_list",
                //   });
                // }, 500);
              })
              .catch((res) => {
                this.submitOpen = false;
                this.$message.error(res.message);
              });
          } else {
            lotteryCreateApi(this.formValidate)
              .then(async (res) => {
                this.submitOpen = false;
                this.$message.success(res.message);
                // setTimeout(() => {
                //   this.submitOpen = false;
                //   this.$router.push({
                //     path: "/admin/marketing/lottery/recording_list",
                //   });
                // }, 500);
              })
              .catch((res) => {
                this.submitOpen = false;
                this.$message.error(res.message);
              });
          }
        } else {
          return false;
        }
      });
    },
    // 上一步
    step() {
      this.current--;
    },
    // 点击商品图
    // modalPicTap(tit, picTit, index) {
    //   this.modalPic = true;
    //   this.isChoice = tit === 'dan' ? '单选' : '多选';
    //   this.picTit = picTit || '';
    //   this.tableIndex = index;
    // },
    modalPicTap(tit, picTit, index) {
      // this.modalPic = true;
      // this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.picTit = picTit || "";
      // this.tableIndex = index;
      //  console.log('picTit',picTit);
      const _this = this;

      this.$modalUpload(function (img) {
        //_this.formValidate.picTit = img[0];
        _this.specsData[index].image = img[0];
      }, tit);
      // const _this = this
      // this.$modalUpload(function(img) {
      //   _this.formValidate.image = img[0]
      // }, tit)
    },
    modalPicTap_image(tit) {
      const _this = this;
      this.$modalUpload(function (img) {
        _this.formValidate.image = img[0];
      }, tit);
    },
    // 获取单张图片信息
    getPic(pc) {
      switch (this.picTit) {
        case "danFrom":
          this.formValidate.image = pc.att_dir;
          break;
        default:
          this.specsData[this.tableIndex].image = pc.att_dir;
      }
      this.modalPic = false;
    },
    handleRemove() {
      this.formValidate.image = "";
    },
    // 表单验证
    validate(prop, status, error) {
      if (status === false) {
        this.$message.error(error);
        return false;
      } else {
        return true;
      }
    },
    //新增商品
    addGoods() {
      this.addGoodsModel = true;
      this.title = "添加奖品";
      this.editData = {};
    },
    //编辑商品
    handleEdit(index, row) {
      this.addGoodsModel = true;
      this.title = "编辑奖品";
      this.editData = this.specsData[index];
      this.editIndex = index;
    },
    //删除商品
    handleDelete(index, row) {
      this.specsData.splice(index, 1);
    },
    //获取数组中某个字段之和
    sumArr(arr, name) {
      let arrData = [];
      for (let i = 0; i < arr.length; i++) {
        arrData.push(arr[i][name]);
      }
      return eval(arrData.join("+"));
    },
    addGoodsData(data) {
      this.editIndex != null
        ? this.$set(this.specsData, [this.editIndex], data)
        : this.specsData.length < 8
        ? this.specsData.push(data)
        : this.$message.warning("最多添加8个奖品");
      this.getProbability();
      this.addGoodsModel = false;
      this.editIndex = null;
    },
    changeChance(data, index) {
      this.$set(this.specsData[index], "chance", data);
      this.$nextTick((e) => {
        this.getProbability();
      });
    },
    changeTotal(data, index) {
      this.$set(this.specsData[index], "total", data);
    },
    //获取商品中奖概率
    getProbability() {
      let sum = 0;
      sum = this.sumArr(this.specsData, "chance");
      for (let j = 0; j < this.specsData.length; j++) {
        if (this.specsData[j].type == 5 || this.specsData[j].type == 10)
          this.specsData[j].coupon_title = this.specsData[j].name;
        if (sum == 0) {
          this.$set(this.specsData[j], "probability", "0%");
        } else {
          this.$set(
            this.specsData[j],
            "probability",
            ((this.specsData[j].chance / sum) * 100).toFixed(2) + "%"
          );
        }
      }
    },
    //修改排序
    onDragDrop(a, b) {
      this.specsData.splice(
        b,
        1,
        ...this.specsData.splice(a, 1, this.specsData[b])
      );
    },
    //时间格式转换
    formatDate(time) {
      if (time) {
        let date = new Date(time * 1000);
        return formatDate(date, "yyyy-MM-dd hh:mm");
      } else {
        return "";
      }
    },
  },
};
</script>

<style scoped lang="scss">
.custom-label {
  display: inline-flex;
  line-height: 1.5;
}

.grey {
  color: #999;
}

.maxW /deep/.ivu-select-dropdown {
  max-width: 600px;
}

.ivu-table-wrapper {
  border-left: 1px solid #dcdee2;
  border-top: 1px solid #dcdee2;
}

.tabBox_img {
  width: 50px;
  height: 50px;
}

.tabBox_img img {
  width: 100%;
  height: 100%;
}

.priceBox {
  width: 100%;
}

.form {
  .picBox {
    display: inline-block;
    cursor: pointer;
  }

  .pictrue {
    width: 58px;
    height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 0px;
    display: inline-block;
    position: relative;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }

    .btndel {
      position: absolute;
      z-index: 9;
      width: 20px !important;
      height: 20px !important;
      left: 46px;
      top: -4px;
    }
  }

  .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
  }
}

.labelInput {
  border: 1px solid #dcdee2;
  padding: 0 6px;
  width: 30%;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;

  .span {
    color: #c5c8ce;
  }

  .ivu-icon-ios-arrow-down {
    font-size: 14px;
    color: #808695;
  }
}
</style>
